<template>
  <div class="user">
    <van-cell-group>
      <van-cell class="user-info">
        <van-image
          :src="user.portrait || 'https://s0.lgstatic.com/common/image/pc/default_boy_headpic1.png'"
          width="50"
          height="50"
          round
        ></van-image>
        <div class="user-info-content">
          <h3 class="user-name" v-text="user.userName"></h3>
          <span>
           <van-icon name="edit"></van-icon>
           编辑个人资料
         </span>
        </div>
      </van-cell>

      <van-cell class="account-info">
        <van-grid :border="false">
          <van-grid-item>
            <span>14.05</span>
            <span>学习时长</span>
          </van-grid-item>
          <van-grid-item>
            <span>200</span>
            <span>钱包/勾豆</span>
          </van-grid-item>
          <van-grid-item>
            <span>1</span>
            <span>优惠券</span>
          </van-grid-item>
          <van-grid-item>
            <span>213</span>
            <span>学分</span>
          </van-grid-item>
        </van-grid>
      </van-cell>

      <van-cell title="分销中心" icon="user-o" is-link value="收益200元"></van-cell>
      <van-cell title="个性化设置" icon="setting-o" is-link></van-cell>
      <van-cell title="我的下载" icon="down" is-link></van-cell>
      <van-cell title="帮助与反馈" icon="question-o" is-link></van-cell>
      <van-cell title="关于拉勾教育" icon="info-o" is-link value="v2.0.0"></van-cell>
    </van-cell-group>

    <layout-footer></layout-footer>
  </div>
</template>

<script>
  import LayoutFooter from '@/components/LayoutFooter'
  import { getUserInfo } from '@/services/user'

  export default {
    name: 'User',
    components: {
      LayoutFooter,
    },
    data() {
      return {
        user: {},
      }
    },
    created() {
      this.loadUserInfo()
    },
    methods: {
      async loadUserInfo() {
        const { content } = await getUserInfo()
        this.user = content
      }
    }
  }
</script>

<style lang="scss" scoped>
  .user-info {
    background-color: #f89603;
    padding: 30px 20px 0;

    .van-cell__value {
      display: flex;
    }

    h3, p {
      padding: 0;
      margin: 0;
    }

    .user-info-content {
      padding-left: 15px;

      .user-name {
        font-size: 18px;
        margin: 5px;
      }
    }
  }

  .account-info {
    background-color: #f89603;
    margin-top: -1px;

    .van-cell__value {
      border-radius: 15px;
    }

    .van-grid-item span:first-child {
      font-size: 22px;
      font-weight: 700;
    }
  }
</style>
